<template>
  <div class="head">
    <div class="headOne">
      <p class="headp" v-show="zhuangtai==1">天马行空志愿填报系统</p>
      <p class="headp1" v-show="zhuangtai==0">天马行空</p>
    </div>
    <div class="headTwo1" v-show="zhuangtai==1">
      <div class="xuanxiang" :class="tabactiv==1?'active':''" @click="gohome()">主页</div>
      <div class="xuanxiang" :class="tabactiv==2?'active':''" @click="gettwo()">院校查询</div>
      <div class="xuanxiang" :class="tabactiv==3?'active':''" @click="getthree()">专业查询</div>
      <div class="xuanxiang" :class="tabactiv==4?'active':''" @click="getfour()">咨询师</div>
      <div class="xuanxiang" :class="tabactiv==5?'active':''"  @mouseover="setativ()" @mouseout="setativ()"   >更多</div>
      <div class="main_menu" v-show="barfalgs" @mouseleave="setativ()" :style="'margin-left:'+(width/2.3)+'px;'">
        <ul class="menu_item">
      <!-- <div class="name pname" @click="$router.replace('/yonghu')" v-show="zhuangtai!=0"></div> -->
      <li class="menu-slect" @click="$router.replace('/yonghu')"> <i class="fa fa-pie-chart fa-4x menu_font .menu_fonts" aria-hidden="true">{{UserName}}</i></li>

      <!-- -->
      <!-- <div class="xuanxiang" :class="tabactiv==4?'active':''" ></div> -->
      <li class="menu-slect" ><i class="fa fa-address-card-o fa-3x menu_fonts .menu_fonts" aria-hidden="true"><a href="http://110.42.188.221:8989/system/user/profile " target="_blank" style="font-size: 20px;">修改信息</a></i> </li>


          <li class="menu-slect" @click="getone()"> <i class="fa fa-pie-chart fa-4x menu_font .menu_fonts" aria-hidden="true">模拟填报</i></li>
          <li class="menu-slect" @click="$router.replace('/myVolunteer')"><i class="fa fa-user-o f4x menu_font .menu_fonts"  aria-hidden="true">志愿单</i></li>
        </ul>
      </div>
    </div>
    <div class="headTwo2" v-show="zhuangtai==0">
      <div class="xuanxiang2" @click="getxuanze()">选择</div>
      <div class="xuanze" v-show="xuanze">
      <div class="name pname xuanxiang1" @click="$router.replace('/yonghu')" ><span>{{UserName}}</span></div>

        <div class="xuanxiang1" @click="gohome()">主页</div>
        <div class="xuanxiang1" @click="gettwo()">院校查询</div>
        <div class="xuanxiang1" @click="getthree()">专业查询</div>
        <div class="xuanxiang1" @click="getfour()">咨询师</div>
        <div class="xuanxiang1" @click="getone()">模拟填报</div>
        <div class="xuanxiang1">修改用户信息</div>
        

      </div>
    </div>
   
  

    <!-- <div class="headThree">
      <div class="grid-content bg-purple bg-purple1">
        <div class="demo-type" @click="tiaotiao()">
          <el-avatar :size="60" :src="Avatar">
          </el-avatar>
          <span class="yonghuname">{{ UserName }}</span>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import tool from "../tool/tool";
import { Tree } from "element-ui";
var xuanze = document.getElementsByClassName("xuanze")[0];
export default {
  props:[
    "tabactiv"
  ],
  data() {
    return {
      tableData: '',
      UserInfo_url: '',
      UserName: '登录',
      url1: "",
      zhuangtai: 1,
      xuanze: false,
      Avatar: "",
      width:0,
      barfalgs:false
    }
  },
  methods: {
    setativ(){
      console.log(this.barfalgs)
      if(this.barfalgs){
        this.barfalgs=false
      }
      else{
        this.barfalgs=true
      }
    },
    gohome() {
      this.$router.replace("/");
    }
    ,
    tiaotiao() {
      this.$router.replace("/yonghu");
    },
    getone() {
      this.$router.replace("/moni");
    },
    gettwo() {
      this.$router.replace("/zhuanjia");
    },
    getthree() {
      this.$router.replace("/zhuanye");
    },
    getfour(){
      this.$router.replace("/consult");
    },
    getxuanze() {
      // console.log(this.xuanze)
      if (this.xuanze) {
        this.xuanze = false;
      }
      else {
        this.xuanze = true;
      }
    },
    info: function () {
      // console.log("执行")
      tool.$request("GET", "/userInfo").then(res => {
        // this.Avatar = this.$Fcee_url.url + res.data.Avatar
        console.log("头像地址" + this.UserInfo_url)
        this.UserName = res.data.username;
      })
    },
    yangshi: function () {
      let ww = window.innerWidth;
      this.width=ww;
      // console.log(ww);
      if (ww <= 800) {
        this.zhuangtai = 0;
      } else {
        this.zhuangtai = 1;
      }
    },
  },
  mounted() {
    this.yangshi();
    window.onresize = () => {
      this.yangshi();
    }
  },
  created() {
    this.info();
  }
}
</script>
<style scoped>
@import '../../style/index.css';
@import '../assets/css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css';


  .main_menu{
    width: 19vh;
    /* height: 190px; */
    text-align: left;
    background-color: var(--ebule);
    position: absolute;
    top: 148px;
    z-index: 999;
    /* background-color: ; */
 
  }
  .menu_item{
    display: block;
    list-style-type: none;
  }

  @media screen and (max-width:600px) {
    .pname{
      width: 8vh;
      position: absolute;
      font-size: 20px;
      left: 12px;
      bottom: 120px;
      top: -50px;
      margin-bottom: 24px;
      font-size: 8px;

      /* margin-top: -30px; */
    }
    
  }
  .name{
    position: relative;
    top: 28px;
    right: 60px;
    /* display: block; */
  }
  .name p{
    /* width: 40px; */
    font-size: 50px;
    font-weight: 900;
    color: var(--pink);
    user-select: none;
  }

 .menu-slect  {
    /* font-size: 10px; */
    line-height: 30px;
    border-bottom: solid rgb(207, 207, 209) 5px;

  }
  .menu-slect:hover{
    background-color: var(--youngBamboo /*若竹色*/);
  }

  .menu_font{
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
    user-select: none;
    /* background-color: var(--ebule); */
    /* margin-bottom: 10px; */
  }
  @media screen and (max-width:800) {
    .menu_fonts{
    font-size: 0.5rem;

    }
}
.head {
  height: 100%;
  width: 100%;
  background-color: var(--ebule);
}

.headOne {
  height: 100%;
  width: 25%;
  float: left;
}

.headp {
  font-size: 30px;
  font-weight: bold;
  margin: 0 auto;
  line-height: 10vh;
  color: white;
}

.headp1 {
  font-size: 30px;
  font-weight: bold;
  margin: 0 auto;
  line-height: 10vh;
  color: white;
}

.headTwo1 {
  width: 55%;
  height: 100%;
  float: left;
  background-color: var(--ebule);
}

.headTwo2 {
  width: 55%;
  height: 100%;
  float: left;
  background-color: var(--ebule);
  position: relative;
}

.headThree {
  width: 20%;
  float: right;
}

.xuanxiang {
  width: 20%;
  height: 100%;
  float: left;
  font-size: 20px;
  font-weight: 700;
  color: white;
  line-height: 10vh;
  user-select: none;
}

.xuanxiang:hover {
  background-color: var(--ebuleH);
}
.active{
  background-color: #4e6cff;
  border-bottom: var(--ebuleH) 14px solid;
}

.xuanxiang2 {
  width: 10vw;
  height: 100%;
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: white;
  line-height: 10vh;
  background-color: #409EFF;
}

.xuanxiang2:hover {
  background-color: c;
}

.xuanze {
  height: 365px;
  width: 200px;
  position: absolute;
  background-color: #409EFF;
  top: 100%;
  left: 60%;
  z-index: 999;
}

.xuanxiang1 {
  height: 50px;
  width: 200px;
  line-height: 50px;
}

.xuanxiang1:hover {
  background-color: #3c8fe3;
}
</style>
